import React from 'react';
import {
  Box,
  Typography,
  Button,
  Container,
} from '@mui/material';
import {
  ErrorOutline,
  Home,
  ArrowBack,
} from '@mui/icons-material';
import { useNavigate } from 'react-router-dom';

import { commonStyles } from '@/styles/utils';

const NotFoundPage: React.FC = () => {
  const navigate = useNavigate();

  const handleGoHome = () => {
    navigate('/');
  };

  const handleGoBack = () => {
    navigate(-1);
  };

  return (
    <Container maxWidth="md">
      <Box
        sx={{
          ...commonStyles.flexColumnCenter,
          minHeight: '70vh',
          textAlign: 'center',
          py: 8,
        }}
      >
        {/* 404图标 */}
        <ErrorOutline
          sx={{
            fontSize: 120,
            color: 'text.disabled',
            mb: 3,
          }}
        />
        
        {/* 错误信息 */}
        <Typography
          variant="h1"
          sx={{
            fontSize: { xs: '4rem', sm: '6rem' },
            fontWeight: 700,
            color: 'text.primary',
            mb: 1,
            lineHeight: 1,
          }}
        >
          404
        </Typography>
        
        <Typography
          variant="h4"
          sx={{
            fontWeight: 600,
            mb: 2,
            color: 'text.primary',
          }}
        >
          页面未找到
        </Typography>
        
        <Typography
          variant="body1"
          color="text.secondary"
          sx={{
            mb: 4,
            maxWidth: 400,
            fontSize: '1.1rem',
          }}
        >
          抱歉，您访问的页面不存在或已被删除。请检查URL是否正确，或返回首页继续浏览。
        </Typography>
        
        {/* 操作按钮 */}
        <Box
          sx={{
            display: 'flex',
            gap: 2,
            flexDirection: { xs: 'column', sm: 'row' },
            alignItems: 'center',
          }}
        >
          <Button
            variant="contained"
            size="large"
            startIcon={<Home />}
            onClick={handleGoHome}
            sx={{
              px: 4,
              py: 1.5,
              borderRadius: 2,
              textTransform: 'none',
              fontSize: '1rem',
            }}
          >
            返回首页
          </Button>
          
          <Button
            variant="outlined"
            size="large"
            startIcon={<ArrowBack />}
            onClick={handleGoBack}
            sx={{
              px: 4,
              py: 1.5,
              borderRadius: 2,
              textTransform: 'none',
              fontSize: '1rem',
            }}
          >
            返回上页
          </Button>
        </Box>
        
        {/* 帮助信息 */}
        <Box sx={{ mt: 6, opacity: 0.7 }}>
          <Typography variant="caption" color="text.secondary">
            如果问题持续存在，请联系系统管理员
          </Typography>
        </Box>
      </Box>
    </Container>
  );
};

export default NotFoundPage;